<template>
    <div class="entry">
        <el-input
            @input="search"
            v-model="searchVal"
            placeholder="请输入关键字搜索"
            style="width: 200px;margin-top: 20px;"
        ></el-input>
        <ul class="entry-btns">
            <li v-for="(item, index) in btns" :key="index"  v-show="!item.hidden">
                <a :href="item.url" target="_blank">
                    <el-button
                        style="width: 80%;"
                        :title="item.name"
                        :type="index % 2 === 0 ? 'primary' : 'danger'"
                    >{{item.name}}</el-button>
                </a>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            searchVal: "",
            timer: null,
            btns: [
                { name: "拖拽", url: "https://gitee.com/a13078253870/interview/blob/master/drag.html" },
                { name: "三栏布局", url: "https://gitee.com/a13078253870/interview/blob/master/%E4%B8%89%E6%A0%8F%E5%B8%83%E5%B1%80.html" },
                { name: "居中", url: "https://gitee.com/a13078253870/interview/blob/master/%E5%B1%85%E4%B8%AD.html" },
                { name: "深克隆", url: "https://gitee.com/a13078253870/interview/blob/master/%E6%B7%B1%E5%85%8B%E9%9A%86.html" },
                { name: "继承", url: "https://gitee.com/a13078253870/interview/blob/master/%E7%BB%A7%E6%89%BF.html" },
                { name: "let var const", url: "https://www.cnblogs.com/zhaoxiaoying/p/9031890.html" },
                { name: "箭头函数和普通函数", url: "https://www.jianshu.com/p/73cbeb6782a0" },
                { name: "强/协商缓存", url: "https://www.jianshu.com/p/73cbeb6782a0" },
                { name: "随机数", url: "https://www.jianshu.com/p/afd498d9f613" },
                { name: "加减乘", url: "https://blog.csdn.net/weixin_29491885/article/details/100129866" },
                { name: "事件委托", url: "https://gitee.com/a13078253870/interview/blob/master/%E4%BA%8B%E4%BB%B6%E5%A7%94%E6%89%98.html" },
                { name: "捕获/冒泡", url: "https://gitee.com/a13078253870/interview/blob/master/%E6%8D%95%E8%8E%B7%E5%86%92%E6%B3%A1.html" },
            ]
        };
    },
    created() {},
    mounted() {},
    methods: {
        search(e) {
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.btns.forEach(item => {
                    if(!item.name.includes(e)){
                        this.$set(item, 'hidden', true)
                    }else{
                        this.$set(item, 'hidden', false)
                    }
                });
            }, 300);
        }
    },
    filters: {},
    components: {}
};
</script>

<style lang="less" scope>
@import "./index.less";
</style>
